Skip to main content

📑 Templates

The Templates section offers a collection of pre-designed screens and layouts that you can integrate into your app. These templates are customizable and can be adjusted by dragging and dropping different components.

How to Use Templates​

  • Access the Templates Section: Create a project and open the Templates section, where you will find a variety of pre-designed templates.
  • Select a Template: Browse through the available templates. You can filter by Mobile Screens or Web Pages, depending on your app's needs. Select a template that fits your use case.
  • Drag & Drop: Once you’ve selected a template, simply drag it to your app canvas. The template will appear on your screen, ready for further customization.
  • Customize the Template:
    • Edit Text: Click on any text element to modify the content.
    • Adjust Layout: Use drag-and-drop functionality to reposition or resize components.
    • Change Actions: Set up interactions and actions for buttons or forms within the template.
    • Add New Components: Enhance the template by adding new components from the component library, such as forms, buttons, or charts.

Types of Templates​

The Templates section includes several categories of templates to help you get started quickly:

  • Mobile Screens:
    • Main Screen Mobile: The starting screen for most apps, containing navigation and main features.
    • Welcome: A welcome screen to introduce your app to users.
    • Login: A login page to authenticate users.
    • Sign Up: A page for new users to create an account.
    • Reset Password: A page to help users recover or reset their passwords.
  • Web Pages:
    • Index Page Desktop: A homepage layout for desktop websites.
    • Subscribe Form Desktop: A form for collecting email subscriptions on desktop pages.
    • Reviews on Desktop: Display customer reviews in a clean, easy-to-read layout.
    • Ask a Question Form: A form layout for submitting inquiries or customer support requests.

Customization Options​

Once a template is added, you can adjust many elements to fit your needs:

  • Component Editing: Click on any component within the template to open left and right bars and modify properties such as color, size, and text.
  • Actions: Set up actions for buttons, such as navigating between screens, submitting forms, or linking to external URLs.
  • Add New Components: Use the drag-and-drop interface to add new components, such as images, text, buttons, or forms, to the template.
  • Theme Settings: Apply your design system’s colors and typography to the template for a cohesive look across your app.

Tips & Best Practices​

  • Start Simple: Choose a template that closely matches the structure you need, then customize it. Avoid over-complicating the layout at the beginning.
  • Consistency: Ensure that the color scheme, typography, and layout match your app's overall design.
  • Interactivity: Make sure all buttons and forms are functional. Set up proper actions to ensure the app behaves as expected.

Need Assistance?​

If you encounter any challenges or require further guidance while building your app, please refer to the Documentation or, contact our support team at [email protected].